import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:sports_new/utils/widget_utils.dart';
import 'package:sports_new/widgets/base/qkd_image.dart';
import '../../entity/other/resource_entity.dart';
import '../../resources/colours.dart';
import '../../utils/utils.dart';
import '../../widgets/base/qkd_text.dart';

class NewsButtonArea extends StatefulWidget {
  const NewsButtonArea({super.key, required this.menus, this.tapType, this.imageSize});

  final List<ResourceEntity> menus;
  final String? tapType;
  final double? imageSize;

  @override
  State<NewsButtonArea> createState() => _NewsButtonAreaState();
}

class _NewsButtonAreaState extends State<NewsButtonArea> {
  int _current = 0;

  set current(int value) => setState(() => _current = value);

  @override
  Widget build(BuildContext context) {
    List<List<ResourceEntity>> list = widget.menus.splitEvery(5);
    return Stack(
      children: [
        CarouselSlider(
          options: CarouselOptions(
            scrollPhysics: const ClampingScrollPhysics(),
            height: 95,
            viewportFraction: 1,
            enableInfiniteScroll: list.length > 1?true:false,
            autoPlay: false,
            onPageChanged: (index, reason) => current = index,
          ),
          items: list.map<Widget>((e) => Container(
            padding: const EdgeInsets.symmetric(horizontal: 16),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                ...List.generate(e.length,
                  (index) => item(e[index]).tap(() {
                    if(widget.tapType.hasValue) {
                      Utils.onEvent(widget.tapType!,params: {widget.tapType!: e[index].title});
                    }
                    e[index].doJump();
                  })
                ),
                if (e.length < 4)
                  ...List.generate(4 - e.length, (index) => item(ResourceEntity()))
              ],
            ),
          )).toList()
        ),
        if(list.length > 1)
        Positioned(
          bottom: 4,
          right: 16,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: List<Widget>.generate(list.length,
              (index) => AnimatedContainer(
                duration: const Duration(milliseconds: 100),
                width: _current == index ? 8 : 3,
                height: 3,
                margin: const EdgeInsets.symmetric(horizontal: 4),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(1.5),
                    color: _current == index
                        ? Colours.main
                        : Colours.greyCC
                )
              )
            ),
          )
        )
      ],
    );
  }

  Widget item(ResourceEntity? entity) => Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      Stack(
        clipBehavior: Clip.none,
        children: [
          QkdImage(imageUrl: entity?.imgUrl, width: widget.imageSize??50, height: widget.imageSize??50, shimmer: false),
          if(entity?.extInfo.hasValue ?? false)
          Positioned(
            top: -7,right: -4,
            child: tag(entity?.extInfo ?? "")
          )
        ],
      ),
      const SizedBox(height: 4),
      SizedOverflowBox(
        alignment: Alignment.topCenter,
        size: const Size(60, 12*1.4),
        child: QkdText(
          entity?.title,
          fontSize: 12,
          fontWeight: FontWeight.w500,
          shimmer: false
        )
      )
    ],
  );

  Widget tag(String text){
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 6,vertical: 1),
      decoration: BoxDecoration(
        gradient: const LinearGradient(
          colors: [Color(0xFFE02D78),Colours.main],
        ),
        border: Border.all(color: Colours.white,width: 1),
        borderRadius: BorderRadius.circular(13),
        color: Colours.main
      ),
      child: QkdText(text,
        color: Colours.white,
        fontSize: 9,
        fontWeight: FontWeight.w500,
        // needCenter: true
      )
    );
  }
}
